<template>
  <wrap title="员工推荐">
    <div slot="page">
        <div class="fill-box light-bg">
            <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
              <span class="font-15">员工号</span>
              <input class="font-15 content" type="text" v-model="recommend.staffNum" placeholder="请输入店员工号" >
            </div>
            <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
              <span class="font-15">推荐码</span>
              <input class="font-15 content" type="text" v-model="recommend.recommendNum" placeholder="请输入推荐码" >
              <button @click="getRecommendCode()" class="btn">{{getCodeBtn.text}}</button>
            </div>
        </div>
        <a href="javascript:;" :class="['next-btn',nextEnable?'red-bg':'grey-9-bg','font-16']" @click="checkValiCode()">下一步</a>
    </div>
  </wrap>
</template>
<script>
import wrap from '../../components/wrap.vue'
export default {
  components: {wrap},
  data () {
    return {
      nextEnable: false,
      getCodeBtn: {
        text: '获取',
        enable: true
      },
      time: '',
      timer: Function,
      recommend: {
        staffNum: '',
        recommendNum: ''
      },
      phone: ''
    }
  },
  created () {
    const self = this
    self.$watch('recommend', () => {
      if (self.recommend.staffNum && self.recommend.recommendNum) {
        self.nextEnable = true
      } else {
        self.nextEnable = false
      }
    }, {deep: true})
  },
  methods: {
    getRecommendCode () {
      let self = this
      if (self.recommend.staffNum) {
        if (self.getCodeBtn.enable) {
          self.$Indicator.open()
          this.$api.fill.getRecommendCode(self.recommend.staffNum).then(res => {
            self.$Indicator.close()
            if (res.code === 0) {
              self.phone = res.data
              self.$Toast('推荐码发送成功')
              self.countDown()
            } else {
              self.$Toast(res.userMsg)
              return false
            }
          }).always(function () {
            self.$Indicator.close()
          })
        }
      } else {
        self.$Toast('请填写推荐员工工号')
        return false
      }
    },
    countDown () {
      const self = this
      self.time = 30
      self.timer = setInterval(() => {
        self.time -= 1
        if (self.time <= 0) {
          clearInterval(self.timer)
          self.getCodeBtn.text = '重新发送'
          self.getCodeBtn.enable = true
          return
        }
        self.getCodeBtn.text = parseInt(self.time) + '秒后重发'
        self.getCodeBtn.enable = false
      }, 1000)
    },
    checkValiCode () {
      const self = this
      if (!self.recommend.recommendNum) {
        self.$Toast('请填写推荐码')
        return
      }
      let code = self.recommend.recommendNum
      let telephone = self.phone
      self.$Indicator.open()
      self.$api.fill.checkValiCode(code, telephone).then(res => {
        self.$Indicator.close()
        if (res.code === 0) {
          // self.$router.push('/?recommend=' + self.recommend.recommendNum + '(' + self.recommend.staffNum + ')')
          self.$router.push('/?recommend=' + self.recommend.staffNum)
        } else {
          self.$MessageBox.alert(res.userMsg)
        }
      }).always(function () {
        self.$Indicator.close()
      })
    }
  }
}
</script>
<style scoped>
  .fill-item span {
    flex: 0 0 60px!important;
  }
  .btn{
    /* flex: 0 0 76px; */
    border: 1px solid #6679b3;
    border-radius: 5px;
    line-height: 25px;
    background: #fff;
    color: #6679b3;
    font-size: 14px;
    padding: 0px 10px;
  }
</style>